<template>
	
	<div class="header-wrap">
		<div class="back-wrap">
			<img src="../../../../assets/icons/unrealengine.png"/>
		</div> 
		<div class="title-wrap">
			<span>UE场景编辑器</span>
		</div>
		<div class="right-wrap">
			
			<ul class="ul-wrap">
				<li><div class="switch-info">场景信息</div>
					  <el-switch
					    v-model="scene_Info_switch"
					    class="ml-2"
					    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #adadad"
					  />
				</li>
				<li><el-icon class="d-li-icon" title="预览"><ChromeFilled /></el-icon> <div class="separator"></div></li>
				<li><el-icon class="d-li-icon" title="设置"><Setting /></el-icon><div class="separator"></div></li>
				<li><el-icon class="d-li-icon" title="帮助"><InfoFilled /></el-icon><div class="separator"></div></li>
				<li @mousedown="MousedownForUserAccount">
					<div class="separator" ></div>
					<el-icon><Avatar /></el-icon>
					<div class="user d-li-icon">超级管理员</div>
					<ul class="dwon" v-show="user_account_down">
						<li class="d-li"><div><el-icon ><Discount /></el-icon></div>账号管理</li>
						<li class="d-li"><div><el-icon ><Right /></el-icon></div>退出</li>
					</ul>
				</li>
			</ul>
			
<!-- 		   <el-breadcrumb separator="|">
		     <el-breadcrumb-item>
				  <span  style="color: #ccc;">场景信息</span>
				   <el-switch
				     v-model="value2"
				     class="ml-2"
				     style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
				   />
			 </el-breadcrumb-item>
		     <el-breadcrumb-item style="padding: 5px;">
				 <el-icon style="font-size: 20px;color: #ccc;"><ChromeFilled /></el-icon>
			 </el-breadcrumb-item>
			 
			 <el-breadcrumb-item style="padding: 5px;">
			 	<el-icon style="font-size: 20px;color: #ccc;"><Setting /></el-icon>
			 </el-breadcrumb-item>
		     <el-breadcrumb-item style="padding: 5px;">
			   <el-icon style="font-size: 20px;color: #ccc;margin-right: 5px;"><Avatar /></el-icon>
			   <el-dropdown style="padding: 2px;">
			     <span class="el-dropdown-link" >
			       超级管理员
			       <el-icon class="el-icon--right">
			         <arrow-down />
			       </el-icon>
			     </span>
			     <template #dropdown>
			       <el-dropdown-menu style="background-color: red;">
			         <el-dropdown-item>账号管理</el-dropdown-item>
			         <el-dropdown-item>退出</el-dropdown-item>
			       </el-dropdown-menu>
			     </template>
			   </el-dropdown>
			 
			 </el-breadcrumb-item>
		   </el-breadcrumb> -->
		</div>
	</div>
	
</template>

<script setup lang="ts">
	import {
	  Back,
	  Setting,
	  ChromeFilled,Right,Discount,InfoFilled,
	  Avatar,
	} from '@element-plus/icons-vue'
	import { ArrowDown } from '@element-plus/icons-vue'

	import { ref } from 'vue'


	const user_account_down = ref(false)
	const scene_Info_switch = ref(false)

	const activeIndex = ref('1')
	const handleSelect = (key: string, keyPath: string[]) => {
	  console.log(key, keyPath)
	}

	const Test=()=>{
		console.log("00")
	}

	const MousedownForUserAccount=(e)=>{
		user_account_down.value=!user_account_down.value
	}	

</script>

<style  scoped>
	.header-wrap{
		height: 45px;
		width: 100%;
	    position: relative; 
		background-color: #28292d;
		border-bottom: 1px solid #18181b;
		display: flex;
		flex-direction:row;
		color: #ccc;
		font-size: 14px;
		
		position: relative;
		    background-color: #28292d;
		    border-bottom: 1px solid #18181b;
		
		
		>.back-wrap{
			position: absolute;
			width: 25px;
			height: 25px;
			top: 12px;
			left: 10px;
			>img{
				width: 100%;
				height: 100%;
				position: absolute;
				cursor: pointer;
				color:rgb(255, 255, 255);
			}
		}
		>.title-wrap{
			position: absolute;
			height: 25px;
			width: auto;
			text-align: center;
			top: 12.5px;
			left: 45px;
			color: #ccc;
		}
		>.name-warp{
			color: #ccc;
		}
		>.right-wrap{
			right: 0rem;
			width: auto;
			position: absolute;
			top: 10px;
			font-size: 0.875rem;
			font-size: 20px;
			color: #ccc;
			>.ul-wrap{
				>li{
					list-style: none;
					float: left;
					cursor: pointer;
					padding: 0 4px;
					>span{
						font-size: 14px;
					}
					>.separator{
						height: 20px;
						width: 2px;
						float: inherit;
						margin-right: 10px;
						margin-top: 3px;
						pointer-events: none;
						border-width: 0 1px;
						border-style: solid;
						border-color: transparent #424653 transparent #1b1e25;
						
					}
					>.switch-info{
						font-size: 0.875rem;
						float: left;
						margin-top: 3px;
					}
					>.el-switch {
						margin-top: -6px;
					}
					>.user{
						margin-top: -27px;
						margin-left: 40px;
						font-size: 14px;
						width: 5.3125rem;
					}
					>.d-li-icon:hover{
						color: #0080ff;
					}
					>.dwon{
						position: relative;
						z-index: 999;
						width: auto;
						font-size: 14px;
						border-top: 2px solid #0080ff;
						margin-top: 9px;
						margin-left: 40px;
						background-color: #2c333f!important;
						pointer-events: all;
						>.d-li{
							padding:0.3125rem;
							>div{
								float: left;
								padding-top: 2px;
								padding-right: 0.3125rem;
							}
						}
						>.d-li:hover{
							background: #303845;
						}
					}
				}
			}
			>el-breadcrumb {
				font-size: 1.25rem;
				
				>el-dropdown{
					background: green;
				}
			}
			
			.el-breadcrumb__separator {
			    margin: 0 9px;
			    font-weight: 700;
			    color:orangered;
			}
			
		}
	}
	
</style>